<template>
    <div class="staff-stats-content">
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">在职人员</div>
          <div class="staff-num">
              <VueCountUp :end-val="384" :duration="2" />
              </div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">在岗人员</div>
          <div class="staff-num">
              <VueCountUp :end-val="370" :duration="3" />
          </div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">本月新入</div>
          <div class="staff-num">
              <VueCountUp :end-val="5" :duration="2" />
          </div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">本月离职</div>
          <div class="staff-num">
              <VueCountUp :end-val="2" :duration="2" />
          </div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">编制内</div>
          <div class="staff-num">300</div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon"></div>
          <div class="staff-label">编制外</div>
          <div class="staff-num">84</div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
    </div>
</template>

  <script setup lang="ts">
      import VueCountUp from "vue-countup-v3";

  </script>

  <style lang="less" scoped>
  @import '../../variables.less';

  .staff-stats-content {
    padding-top: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .staff-count-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    gap: 10px 15px;
  }

  .staff-item {
    display: flex;
    align-items: center;
    flex-basis: calc(50% - 8px);
    flex-grow: 1;
    min-width: 140px;
    height: 50px;
    background: url("../../../../assets/user_bg.png" ) no-repeat;
    background-size: 100% 100%;
  }

  .staff-icon {
    width: 35px;
    height: 35px;
    background: url("../../../../assets/user.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 12px;
    font-weight: bold;
    color: @text-color-light;
    flex-shrink: 0;
  }

  .staff-label {
    font-size: 14px;
    color: #fff;
    margin-right: 5px;
    white-space: nowrap;
    font-weight: 600;
  }

  .staff-num {
    font-size: 15px;
    font-weight: bold;
    color: @primary-color;
    margin: 0 5px;
    white-space: nowrap;
  }

  .staff-unit {
    font-size: 12px;
    color: darken(@text-color, 15%);
    white-space: nowrap;
    padding-top: 4px;
  }


  @media (max-width: 480px) {
      .staff-item {
          flex-basis: 100%; // Stack items on very small screens
      }
  }
  </style>